<style scoped>

</style>
<template>
    <div id='myApp'>
        <Row style="margin-bottom: 10px;border-bottom: 1px solid #eeeeee;">
            <Col span="6" style="border-bottom:2px solid #2d8cf0 ;padding: 0 0 8px 18px;">
            <span style="color: #2d8cf0;">
                <Icon type="md-add-circle" />&nbsp;&nbsp;
                <span style="color: black;">接口管理&nbsp;&nbsp;>&nbsp;&nbsp;</span>
                API KEY管理
            </span>
            </Col>
            <Col span="5" offset="13">
                <router-link to='/createKey'>
                    <Button @click="modal1=true" type="success" label="small"
                    style="border: none;height: 27px; float: right;">创建KEY</Button>
                </router-link>
               <Button type="text" style="color:#2d8cf0; float: right;" @click="modal1=true"><u>这是什么?</u></Button>
            </Col>
            <Modal v-model="modal1" width="410">
                <p slot="header" style="color: #2d8cf0;">
                    <Icon type="ios-information-circle"></Icon>
                    <span>帮助文档 >> API接入KEY</span>
                </p>
                <div>
                    <p>每个API接入需要提供一个授权的KEY</p>
                    <p>这个KEY由DAST统一发放，每次调用都需要验证</p>
                </div>
                <div slot="footer">
                    
                </div>
            </Modal>
        </Row>
        <Row style="margin-bottom: 20px;">
            <Col span="5">
            API名称：
            <Input v-model="condition.apiName" style="width:60%;" />
            </Col>
            <Col span="5">
            接入者名称：
            <Input v-model="condition.userName" style="width:50%;" />
            </Col>
            <Col span="5">
            IP地址：
            <Input v-model="condition.userIP" style="width:60%;" />
            </Col>           
            <Col span="7">
                接入KEY：
                <Input v-model="condition.key" style="width:70%;" />
            </Col>
            <Col span="2">
            &nbsp;&nbsp;
            <Button type="primary" @click="handleSearch" style="width: 80%;">
                <Icon type="ios-search" /></Button>
            </Col>
        </Row>
        <Table :columns="httpColumns" :data="httpData"></Table>
        <div style="float: right; margin-top: 15px">
            <Page :total="dataCount" :page-size="pageSize" class="paging" @on-change="changepage" show-elevator></Page>
        </div>
    </div>
    </div>
</template>
<script>

    import { mapState, mapActions } from 'vuex'
    import zmitiUtil from '../../lib/util'
    export default {
        computed: mapState({
            Authorization: state => state.Authorization
        }),

        data() {
            return {
                modal1:false,
                ruleForm: {
                    name: '',
                    type: '',
                    config: ''
                },
                ruleValidate: {

                },
                modal1: false,
                dataCount: 0,
                pageSize: 10,
                condition:{
                    apiName:'',
                    userName:'',
                    userIP:'',
                    key:'',
                    checkCode:'',
                    pageNO:1,
                    pageSize:10
                },
                ajaxHttpData: [],
                xia: 0,
                httpColumns: [                    
                    {
                        title: 'API名称',
                        key: 'apiName',
                        align: 'center'
                    },
                    {
                        title: '接入者',
                        key: 'userName',
                        align: 'center'
                    },
                    {
                        title: 'IP',
                        key: 'userIP',
                        align: 'center'
                    },
                    {
                        title: 'API KEY',
                        key: 'key',
                        align: 'center',
                    },
                    {
                        title: '校验码',
                        key: 'checkCode',
                        align: 'center'
                    },
                    {
                        title: '状态',
                        width: 90,
                        key: 'enabled',
                        align: 'center',
                        render:(h,params)=>{
                            let enabled=params.row.enabled==true?'开启':'关闭'
                            return h('div',{},enabled)
                        }
                    },
                    {
                        title: '创建时间',
                        key: 'date',
                        align: 'center'
                    },
                    {
                        title: '操作',
                        width: 140,
                        align: 'center',
                        render: (h, params) => {
                            const row = params.row;
                            return h('div', [
                                h('Button', {
                                    props: {
                                        size: 'small',
                                        type: 'text'
                                    },
                                    style: {
                                        marginRight: '5px',
                                        color:'#2d8cf0'
                                    },
                                    on: {
                                        click: () => {
                                            // 启用停用
                                            let enabled=!params.row.enabled
                                            this.checkApikey(params.row.id,enabled);
                                        }
                                    }
                                }, params.row.enabled==true?'停用':'启用'),
                                h('Poptip', {
                                      props: {
                                          confirm: true,
                                          type: 'error',
                                          size: 'large',
                                          title: '你确定要删除吗?',
                                          transfer:true
                                      },

                                      on: {
                                          'on-ok': () => {
                                             this.deleteApikey(params.row.id); 
                                          }
                                      }
                                  }, [
                                      h('Button', {
                                        props: {
                                            size: 'small',
                                            type: 'text'
                                        },
                                        style: {
                                            marginRight: '5px',
                                            color:'red'
                                        },
                                      },'删除')
                                  ])
                            ]);
                        }
                    }

                ],
                httpData: []
            }
        },
        mounted() {
            // 获取列表
            this.getDataList();
        },
        methods: {
            getDataList(){//列出所有的APIKey
                var _this = this;                
                var path='apikey/list';
                var postData = _this.condition;
                zmitiUtil.Ajax(path,postData).then(res => {
                    var data = res.data;
                    
                    if(res.data.total>0){
                        _this.httpData = res.data.results;
                        _this.dataCount=res.data.total
                    }else{
                        _this.httpData=[];
                        _this.dataCount=0;
                    }
                    
                }).catch((error) => {
                    console.log(error,'error');
                });
            },
            // 获取翻页列表
            changepage(index) {
                var _this = this;
                //index当前页码
                console.log('index = ' + index)
                _this.condition.pageNO=index;
                _this.getDataList();           
            },
            handleSearch(){
                var _this = this;
                _this.condition.pageNO=1;
                _this.getDataList();
            },
            deleteApikey(id){//删除
                var _this = this;             
                var path='apikey/delete';
                var postData = {
                    id
                };
                console.log(postData,'删除用户postData')
                zmitiUtil.Ajax(path,postData).then(res => {
                    var data = res.data;
                    console.log(data,'data')
                    if(res.data.code==1){
                        _this.$Message.success('删除成功！');
                        _this.getDataList();
                    }else{
                        _this.$Message.error(res.data.result);
                    }
                }).catch((error) => {
                    console.log(error,'error');
                });
            },
            checkApikey(id,enabled){//启用停用APIKey
                var _this = this;             
                var path='apikey/enable';
                var postData = {
                    id,
                    enabled
                };
                console.log(postData,'启用停用postData')
                zmitiUtil.Ajax(path,postData).then(res => {
                    var data = res.data;
                    console.log(data,'data')
                    if(res.data.code==1){
                        _this.$Message.success('更改成功！');
                        _this.getDataList();
                    }else{
                        _this.$Message.error(res.data.result);
                    }
                }).catch((error) => {
                    console.log(error,'error');
                });
            }
        },
        created() {

        }
    }
</script>